<template>
  <div>
    <a-form layout="horizontal" @submit="handleSubmit" :autoFormCreate="(form) => this.form = form" class="form">
      <a-card class="card" title="基本信息" :bordered="false">
        <a-row class="form-row" :gutter="16">
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="SKU"
              fieldDecoratorId="sku"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入SKU', whitespace: true}]}"
            >
              <a-input placeholder="请输入SKU" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="条形码"
              fieldDecoratorId="barcode"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入条形码', whitespace: true}]}"
            >
              <a-input placeholder="请输入条形码" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="名称"
              fieldDecoratorId="name"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入商品名称'}]}"
            >
              <a-input placeholder="请输入商品名称" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="品牌"
              fieldDecoratorId="brand_id"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择品牌'}]}"
            >
              <a-select placeholder="请选择品牌">
                <a-select-option v-for="d in brands" :key="d.id">{{ d.name }}</a-select-option>
                <!-- <a-select-option v-for="item in brands" :key="item.id" :label="item.name" :value="item.id"></a-select-option> -->
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="兑换个数"
              fieldDecoratorId="exchange_price"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请输入兑换个数'}]}"
            >
              <a-input placeholder="请输入兑换个数" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="主类别"
              fieldDecoratorId="category_id"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择类别'}]}"
            >
              <a-select placeholder="请选择类别">
                <a-select-option v-for="d in categories" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="副分类"
              fieldDecoratorId="secondary_category_id"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择副分类'}]}"
            >
              <a-select placeholder="请选择副分类">
                <a-select-option v-for="d in secondary_categories" :key="d.id">{{ d.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="兑换方式   "
              fieldDecoratorId="is_online"
              :fieldDecoratorOptions="{
                rules: [{ required: true, message: '请设置兑换方式'}],
                initialValue: is_online
              }"
            >
              <a-radio-group name="radioGroup" @change="changeType">
                <a-radio :value="0">门店兑换</a-radio>
                <a-radio :value="1">线上直邮</a-radio>
                <a-radio :value="2">线上拼兑</a-radio>
              </a-radio-group>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24" v-if="is_online > 0">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="邮费规则"
              fieldDecoratorId="template_id"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请选择邮费规则'}]}"
            >
              <a-select placeholder="请选择邮费规则">
                <a-select-option v-for="t in templates" :key="t.id">{{ t.name }}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="拼团起始时间"
              fieldDecoratorId="online_time"
              :fieldDecoratorOptions="{rules: [{ required: false, message: '请输入拼团起始时间'}]}"
            >
              <a-input placeholder="请输入拼团起始时间" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="拼团期限"
              fieldDecoratorId="period"
              :fieldDecoratorOptions="{rules: [{ required: false, message: '请输入拼团期限'}]}"
            >
              <a-input placeholder="请输入拼团期限" />
            </a-form-item>
          </a-col>
          <a-col :md="12" :sm="24">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol"
              label="目标单数"
              fieldDecoratorId="required_number"
              :fieldDecoratorOptions="{rules: [{ required: false, message: '请输入目标单数'}]}"
            >
              <a-input placeholder="请输入目标单数" />
            </a-form-item>
          </a-col>
          
        </a-row>
      </a-card>
      <a-card class="card" title="图片信息" :bordered="false">
        <a-row>
          <a-col :md="24">
            <a-form-item
              label="商品列表封面"
              fieldDecoratorId="pic_url"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请上传商品列表封面'}]}"
            >
              <a-upload
                name="file"
                listType="picture-card"
                class="avatar-uploader"
                :showUploadList="false"
                action="//upload.qiniup.com"
                :beforeUpload="beforeCoverUpload"
                :data="imgForm"
                @change="handleCoverChange"
              >
                <img width=128 height=128 v-if="pic_url" :src="pic_url" />
                <div v-else>
                  <a-icon :type="loading ? 'loading' : 'plus'" />
                  <div class="ant-upload-text">上传</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :md="24">
            <a-form-item
              label="详情页轮播图"
              fieldDecoratorId="images"
              :fieldDecoratorOptions="{rules: [{ required: true, message: '请上传详情页轮播图'}]}"
            >
              <a-upload
                action="//upload.qiniup.com"
                listType="picture-card"
                :fileList="fileList"
                :beforeUpload="beforeUpload"
                :data="imgForm"
                @change="handleChange"
              >
                <div v-if="fileList.length < 6">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">上传</div>
                </div>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
      <a-card class="card" title="商品规格" :bordered="false">
        <div class="wawa-sku">
          <div class="wawa-sku-group" v-for="(attr,index) in skuAttrs" :key="`attr${index}`">
            <h3 class="group-title">
              <span class="group-title__label">规格名：</span>
              <a-auto-complete
                style="width: 94px"
                @focus="handleFocus(index)"
                @change="handleChangeKey"
                @blur="handleBlurKey"
                :filterOption="filterOption"
              >
                <template slot="dataSource">
                  <a-select-option v-for="k in keyAttrs" :key="k.k_name">{{ k.k_name }}</a-select-option>
                </template>
              </a-auto-complete>
              <span class="group-remove" @click="removeKey(index)">×</span>
            </h3>
            <div class="group-container">
              <span class="sku-list__label">规格值：</span>
              <div class="sku-list">
                <div class="wawa-sku-item" v-for="(item,index2) in attr.values" :key="`item${index2}`">
                  <a-auto-complete
                    style="width: 94px"
                    @focus="handleFocusValue(index, index2)"
                    @change="handleChangeValue"
                    @blur="handleBlurValue"
                    :filterOption="filterOption"
                  >
                    <template slot="dataSource">
                      <a-select-option v-for="v in valueAttrs" :key="v.v_name">{{ v.v_name }}</a-select-option>
                    </template>
                  </a-auto-complete>
                  <span class="item-remove small" @click="removeValue(index, index2)">×</span>
                </div>
                <a class="sku-add" @click="addValue(index)"><a-icon type="plus" />添加规格值</a>
              </div>
            </div>
            <div class="sku-group-cont"></div>
          </div>
          <div class="wawa-sku-group">
            <h3 class="group-title"><a-button @click="addKey">添加规格项目</a-button></h3>
          </div>
        </div>
      </a-card>
      <a-card class="card" title="价格信息" :bordered="false" v-show="tableData && tableData[0]['values'].length > 0">
        <a-table :columns="columns" :dataSource="skus" :pagination="false" bordered>
          <template slot="name" slot-scope="text">
            {{ getValueName(text) }}
          </template>
          <template slot="price" slot-scope="text, record">
            <a-input v-model.number="record.price" style="width: 100px;" />
          </template>
          <template slot="sku_sn" slot-scope="text, record">
            <a-input v-model="record.sku_sn" style="width: 150px;" />
          </template>
          <template slot="cover" slot-scope="text, record">
            <a-upload
              name="file"
              listType="picture-card"
              class="sku-cover"
              :showUploadList="false"
              action="//upload.qiniup.com"
              :beforeUpload="beforeCoverUpload"
              :data="imgForm"
              @change="info => handleSkuCoverChange(info, record)"
            >
              <img width=50 height=50 v-if="record.cover" :src="record.cover" />
              <div v-else>
                <a-icon :type="loading ? 'loading' : 'plus'" />
                <div class="ant-upload-text">上传</div>
              </div>
            </a-upload>
          </template>

        </a-table>
      </a-card>
      <a-card class="card" title="详情描述" :bordered="false">
        <a-form-item
          fieldDecoratorId="detail"
          :fieldDecoratorOptions="{
            rules: [{ required: false, message: '请输入商品详情'}],
            initialValue: detail
          }"
        >
          <!-- <editor-tinymce v-model="detail" /> -->
          <tinymce v-model="detail"/>
        </a-form-item>
      </a-card>
      <a-card class="card" :bordered="false">
        <a-row>
          <a-col :span="4" :offset="10">
            <a-form-item
              :labelCol="labelCol"
              :wrapperCol="wrapperCol">
              <a-button type='primary' htmlType='submit'>提交</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-card>
    </a-form>
  </div>
</template>
<script>
import Tinymce from '@/components/Tinymce'
import { getCategoryList, getSecondaryCategoryList } from '@/api/category'
import { getBrandList } from '@/api/brand'
import { getFeeTemplateList } from '@/api/fee_template'
import { getQiniuToken } from '@/api/qiniu'
import { addGoods, getAttrList, addAttrKey, addAttrValue } from '@/api/goods'

export default {
  name: 'AddGoods',
  components: {
    Tinymce
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      loading: false,
      imgForm: {},
      bucketHost: '',
      fileList: [],
      listObj: [],
      form: null,
      pic_url: '',
      detail: '',
      categories: [], // 主分类列表
      secondary_categories: [], // 副分类列表
      brands: [], // 品牌列表
      is_online: 0,
      templates: [], // 运费模板列表
      attrs: [],
      kAttrs: [],
      // vAttrs: [],
      skuAttrs: [],
      kIndex: 0,
      vIndex: 0,
      skus: [],
      columns: [
        {
          title: '规格组合',
          dataIndex: 'attrs',
          scopedSlots: { customRender: 'name' }
        },
        {
          title: '兑换娃娃个数',
          dataIndex: 'price',
          scopedSlots: { customRender: 'price'}
        },
        {
          title: 'SKU编码',
          dataIndex: 'sku_sn',
          scopedSlots: { customRender: 'sku_sn'}

        },
        {
          title: 'SKU封面图',
          dataIndex: 'cover',
          scopedSlots: { customRender: 'cover'}

        }
      ]
    }
  },
  created () {
    this.getCategoryList()
    this.getSecondaryCategoryList()
    this.getBrandList()
    this.getAttrList()
    this.getTemplateList()
  },
  filters:{
    getName:function(obj,index){
      if(obj){
        var r = parseInt((index-1)/obj['rowspan']);
        var l = obj['specLen']||1
        var key = r%l
        return obj['values']&&obj['values'][key]&&obj['values'][key]['v_name']
      }
    }
  },
  computed:{
    tableData() {
      var attrs = this.skuAttrs
      var len = attrs.length
      if(len==0){
        return
      }
      var tData = []
      //初始化tableData
      for (var i = 0; i < len; i++) {
        var row = {}
        row['k_id'] = attrs[i]['k_id']
        row['k_name'] = attrs[i]['k_name']
        row['values'] = []
        row['price'] = {}
        row['sku_sn'] = {}
        var len2 = attrs[i]['values'].length
        var specLen = 0
        for (var j = 0; j < len2; j++) {
          var spe = {}
          var vName = attrs[i]['values'][j]['v_name']
          if(!vName){
            continue
          }
          ++specLen;
          spe['v_id'] = attrs[i]['values'][j]['v_id']
          spe['v_name'] = vName
          row['values'].push(spe)
        }
        row['specLen'] = specLen
      
        tData.push(row)
      }
      //获取rowspan
      for (var k = 0,len3=tData.length; k < len3; k++) {
        var rowspan = 1
        for (var k1 = k+1; k1 < len3; k1++) {
          var kSpecLen = tData[k1]['specLen']||1
          rowspan*=kSpecLen
        }
        tData[k]['rowspan'] = rowspan
      }
      return tData
    },
    rows() {
      if(!this.tableData){
        return
      }
      var rows = 1
      var tableData = this.tableData
      var len = tableData.length
      for (var i = 0; i < len; i++) {
         var specLen = tableData[i]['specLen']||1
         rows*=specLen
      }
      //每条rowspan都为1情况
      if(rows==1){
        return tableData[0]['values'].length
      }
      return rows
    },
    keyAttrs() {
      const vm = this
      let arr = []
      let list = vm.skuAttrs.filter((item, index) => index !== vm.kIndex)
      arr = vm.kAttrs.filter(item => {
        if (list.find(a => a.k_name === item.k_name)) {
          return false
        } else {
          return true
        }
      })
      return arr
    },
    valueAttrs() {
      const vm = this
      let arr = []
      let list = vm.skuAttrs[vm.kIndex].values.filter((item, index) => index !== vm.vIndex)
      arr = vm.vAttrs.filter(item => {
        if (list.find(a => a.v_name === item.v_name)) {
          return false
        } else {
          return true
        }
      })
      return arr
    },
    vAttrs() {
      const vm = this
      let arr = []
      vm.attrs.forEach(item => {
        if (vm.skuAttrs[vm.kIndex]['k_id'] === item['k_id']) {
          arr = item['values']
        }
      })
      return arr
    }
  },
  methods: {
    getCategoryList: function () {
      getCategoryList().then(res => {
        this.categories = res.data.data
      })
    },
    getSecondaryCategoryList: function () {
      getSecondaryCategoryList().then(res => {
        this.secondary_categories = res.data.data
      })
    },
    getBrandList: function () {
      getBrandList().then(res => {
        this.brands = res.data.data
      })
    },
    getTemplateList() {
      getFeeTemplateList().then(res => {
        this.templates = res.data.data
      })
    },
    getAttrList() {
      let vm = this
      getAttrList().then(res => {
        vm.attrs = res.data
        vm.kAttrs = vm.attrs.map(item => {
          let r = {
            k_id: item.k_id,
            k_name: item.k_name
          }
          return r
        })
      })
    },
    changeType(e) {
      this.is_online = e.target.value
    },
    handleSubmit (e) {
      e.preventDefault()
      const vm = this
      vm.form.validateFields((err, values) => {
        if (!err) {
          const arr = Object.keys(vm.listObj).map(v => {
            return {
              url: vm.listObj[v].url,
              with: vm.listObj[v].width,
              height: vm.listObj[v].height
            }
          });
          values.images = arr
          values.pic_url = vm.pic_url
          values.detail = vm.detail
          values.skus = vm.skus
          addGoods(values).then(res => {
            if (res.code === 0) {
              vm.$message.success('添加成功')
              vm.$router.push({name: 'GoodsList'})
            }
          })
        }
      })
    },
    beforeCoverUpload: function () {
      let _this = this
      return getQiniuToken().then(res => {
        _this.bucketHost = res.data.bucketHost
        _this.imgForm = {
          // key: res.key,
          token: res.data.token
        }
      })
    },
    beforeUpload(file) {
      const me = this
      const fileName = file.uid
      this.listObj[fileName] = {}
      return getQiniuToken().then(res => {
        me.listObj[fileName] = { hasSuccess: false, uid: file.uid, width: this.width, height: this.height }
        me.bucketHost = res.data.bucketHost
        me.imgForm = {
          // key: res.key,
          token: res.data.token
        }
      })
    },
    handleChange (info) {
      this.fileList = info.fileList
      if (info.file.status === 'uploading') {
        // this.loading = true
      } else if (info.file.status === 'done') {
        const { uid } = info.file;
        const objKeyArr = Object.keys(this.listObj);
        this.loading = false
        for (let i = 0, len = objKeyArr.length; i < len; i++) {
          if (this.listObj[objKeyArr[i]].uid === uid) {
            this.listObj[objKeyArr[i]].url = `${this.bucketHost}${info.file.response.key}`
            this.listObj[objKeyArr[i]].hasSuccess = true
            return
          }
        }
      } else if (info.file.status === 'error') {
        // this.loading = false
        this.$message.error('上传图片失败，请重试')
      } else if (info.file.status === 'removed') {
        console.log('removed')
      }
    },
    handleCoverChange (info) {
      if (info.file.status === 'uploading') {
        this.loading = true
      } else if (info.file.status === 'done') {
        let key = info.file.response.key
        this.pic_url = `${this.bucketHost}${key}`
        this.loading = false
      } else if (info.file.status === 'error') {
        this.loading = false
        this.$message.error('上传图片失败，请重试')
      } else if (info.file.status === 'removed') {
        console.log('removed')
      }
    },
    handleSkuCoverChange(info, record) {
      if (info.file.status === 'uploading') {
        this.loading = true
      } else if (info.file.status === 'done') {
        let key = info.file.response.key
        record.cover = `${this.bucketHost}${key}`
        this.loading = false
      } else if (info.file.status === 'error') {
        this.loading = false
        this.$message.error('上传图片失败，请重试')
      } else if (info.file.status === 'removed') {
        console.log('removed')
      }
    },
    addKey() {
      var obj = {
        k_id: undefined,
        k_name: '',
        rowspan: 1,
        values: [{v_id: 0, v_name: ''}]
      }
      if(this.skuAttrs.length>=3){
        return
      }
      this.skuAttrs.push(obj)
    },
    removeKey(index) {
      this.skuAttrs.splice(index, 1)
      this.kIndex = index === 0 ? index : index - 1
      this.vIndex = 0
    },
    handleChangeKey(value){
      const _this = this
      for (let i = 0; i < this.skuAttrs.length; i++) {
        if (i !== this.kIndex && this.skuAttrs[i]['k_name'] === value) {
          this.$message.error('此属性已经选择了')
          return
        }
      }
      this.skuAttrs[this.kIndex]['k_name'] = value
      this.attrs.forEach(item => {
        if (item['k_name'] === value) {
          _this.skuAttrs[this.kIndex]['k_id'] = item['k_id']
        }
      })
    },
    handleFocus(index) {
      this.kIndex = index
    },
    addValue(index){
      this.skuAttrs[index]['values'].push({v_id: 0, v_name: ''})
    },
    removeValue(index, index2) {
      if (index2 === 0) {
        return
      }
      this.skuAttrs[index]['values'].splice(index2, 1)
    },
    handleFocusValue(index, index2) {
      this.vIndex = index2
      this.kIndex = index
    },
    handleChangeValue(value){
      const vm = this
      if (vm.skuAttrs[vm.kIndex]['k_id'] === undefined || vm.skuAttrs[vm.kIndex]['k_id'] === 0) {
        this.$message.error('请先设置规格名')
        return
      }
      for (let i = 0; i < vm.skuAttrs[vm.kIndex]['values'].length; i++) {
        if (i !== this.vIndex && vm.skuAttrs[vm.kIndex]['values'][i]['v_name'] === value) {
          this.$message.error('此属性值已经选择了')
          return
        }
      }
      vm.skuAttrs[vm.kIndex]['values'][vm.vIndex]['v_name'] = value
      vm.vAttrs.forEach(item => {
        if (item.v_name === value) {
          vm.skuAttrs[vm.kIndex]['values'][vm.vIndex]['v_id'] = item['v_id']
        }
      })
    },
    handleBlurKey(value) {
      let vm = this
      if (value && vm.skuAttrs[vm.kIndex]['k_id'] === undefined) {
        addAttrKey({name: value}).then(res => {
          if (res.code === 0) {
            vm.skuAttrs[vm.kIndex]['k_id'] = res.data.k_id
            vm.getAttrList()
          }
        })
      }
    },
    handleBlurValue(value) {
      let vm = this
      if (vm.skuAttrs[vm.kIndex]['k_id'] === undefined || vm.skuAttrs[vm.kIndex]['k_id'] === 0) {
        this.$message.error('请先设置规格名')
        return
      }
      if (value && vm.skuAttrs[vm.kIndex]['values'][vm.vIndex]['v_id'] === 0) {
        addAttrValue(vm.skuAttrs[vm.kIndex]['k_id'], value).then(res => {
          if (res.code === 0) {
            vm.skuAttrs[vm.kIndex]['values'][vm.vIndex]['v_id'] = res.data.v_id
            vm.getAttrList()
          }
        })
      }
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    reBuild() {
      if (!this.tableData) {
        return
      }
      let vmSkus = []
      let srcData = this.tableData
      let rows = this.rows
      for (var i = 0; i < rows; i++) {
        var sku = {
          sku_sn: '',
          price: 0,
          cover: '',
          attrs: []
        }
        for (var j = 0; j < srcData.length; j++) {
          let rowspan = srcData[j]['rowspan']
          let len = srcData[j]['specLen']
          if (!len) {
            continue
          }
          let values = srcData[j]['values']
          var index = parseInt(i/rowspan)%len
          sku.attrs.push({
            k_id: srcData[j]['k_id'],
            k_name: srcData[j]['k_name'],
            v_id: values[index]['v_id'],
            v_name: values[index]['v_name']
          })
        }
        vmSkus.push(sku)
      }
      this.skus = vmSkus
    },
    getValueName: function(attrs) {
      var valueName = ''
      attrs.forEach(attr => {
        valueName += attr.k_name + ':' + attr.v_name + ' '
      })
      return valueName
    }
  },
  watch: {
    tableData: {
      handler: 'reBuild'
    }
  }
}
</script>
<style scoped>
.wawa-sku {
  background-color: #fff;
  padding: 10px;
  border: 1px solid #e5e5e5;
}
.wawa-sku-group {
  position: relative;
}
.wawa-sku-group .group-title {
  position: relative;
  padding: 7px 10px;
  margin: 0;
  background-color: #f8f8f8;
  font-size: 14px;
  line-height: 16px;
  font-weight: 400;
}
.wawa-sku-group .group-title__label {
  display: inline-block;
  width: 80px;
}
.wawa-sku-group .group-title:hover .group-remove{
  display:block;
}
.wawa-sku-group .group-remove {
  display: none;
  position: absolute;
  top: 12px;
  right: 10px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 16px;
  background: hsla(0,0%,60%,.6);
  border-radius: 10px;
  text-indent: 0;
}
.wawa-sku-group .group-container {
  padding: 10px 10px 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}
.wawa-sku-group .sku-list {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -moz-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  /* margin-left: 5px; */
}
.wawa-sku-group .sku-list__label {
  width: 80px;
  padding-top: 10px;
  font-size: 14px;
}
.wawa-sku-group .sku-add {
  display: inline-block;
  vertical-align: top;
  font-size: 12px;
  cursor: pointer;
  margin: 9px 0 0 5px;
  text-decoration: none;
}
.wawa-sku .wawa-sku-item {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin: 5px 5px 5px 0;
  text-align: center;
}
.wawa-sku .wawa-sku-item.active {
  margin-bottom: 100px;
}
.wawa-sku .wawa-sku-item .item-remove.small {
  top: -6px;
  right: -4px;
  width: 18px;
  height: 18px;
  font-size: 14px;
  line-height: 16px;
  border-radius: 9px;
}
.wawa-sku .wawa-sku-item .item-remove {
  display: none;
  position: absolute;
  z-index: 2;
  top: -9px;
  right: -9px;
  width: 20px;
  height: 20px;
  font-size: 16px;
  line-height: 18px;
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: hsla(0,0%,60%,.6);
  border-radius: 10px;
}
.wawa-sku .wawa-sku-item:hover .item-remove{
  display:block;
}
.wawa-sku .wawa-sku-item.active {
    margin-bottom: 100px;
}
.wawa-sku .wawa-sku-item span {
  display: block;
  width: 74px;
  margin: 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wawa-sku .wawa-sku-item .upload-img-wrap {
  position: absolute;
  top: 36px;
  left: 0;
  padding: 2px;
  width: 84px;
  background: #fff;
  /* border-radius: 4px;
  border: 1px solid #dcdcdc; */
}
.wawa-sku .wawa-sku-item .upload-img-wrap .arrow {
  position: absolute;
  width: 0;
  height: 0;
  top: -5px;
  left: 44%;
  border-style: solid;
  border-color: transparent;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #000;
}
.wawa-sku .wawa-sku-item .upload-img-wrap .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border: 10px solid transparent;
    top: 0;
    margin-left: -10px;
    border-bottom-color: #fff;
    border-top-width: 0;
    content: "";
}
.wawa-sku .wawa-sku-item .upload-img-wrap .sku-cover {
  width: 84px;
  height: 84px;
}

.wawa-sku-group .sku-group-cont {
  padding: 0 10px 0 70px;
  margin-bottom: 15px;
  margin-top: 2px;
}
.table-sku-wrap {
  padding: 10px 10px 5px;
  border: 1px solid #e5e5e5;
  font-size: 12px
}

.table-sku-stock {
  width: 100%;
  background-color: #fff;
  text-align: left
}

.table-sku-stock th {
  padding: 10px 8px;
  font-weight: 400
}

.table-sku-stock th.th-price {
  width: 100px
}

.table-sku-stock th.th-code {
  width: 90px
}

.table-sku-stock tr.has-border {
  border-top: 1px solid #e5e5e5
}

.table-sku-stock td {
  padding: 8px
}

.table-sku-stock td.has-border {
  border: 1px solid #e5e5e5
}

.table-sku-stock td:first-of-type {
  border-left: none
}

.table-sku-stock td:last-of-type {
  border-right: none
}

.table-sku-stock tbody {
  border-top: 1px solid #e5e5e5;
  border-bottom: 1px solid #e5e5e5
}
</style>

<style lang="less">
// .sku-cover {
//   width: 84px;
//   height: 84px;
// }
.sku-cover > .ant-upload {
    width: 50px;
    height: 50px;
}
.sku-cover > .ant-upload.ant-upload-select-picture-card > .ant-upload {
  padding: 0;
}
</style>
